<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faHome, faCompass, faList, faUser } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faHome, faCompass, faList, faUser)

const router = useRouter()
const route = useRoute()

const activeNav = ref('home')

// 根据当前路由设置活动导航项
watch(() => route.name, (newRouteName) => {
  if (newRouteName === 'home') activeNav.value = 'home'
  else if (newRouteName === 'discover' || newRouteName === 'category') 
    activeNav.value = 'discover'
  else if (newRouteName === 'orders') activeNav.value = 'orders'
  else if (newRouteName === 'profile') activeNav.value = 'profile'
}, { immediate: true })

const navItems = ref([
  { name: 'home', label: '首页', icon: faHome },
  { name: 'discover', label: '发现', icon: faCompass },
  { name: 'orders', label: '订单', icon: faList },
  { name: 'profile', label: '我的', icon: faUser }
])

// 导航点击处理
const handleNavClick = (navName: string) => {
  activeNav.value = navName
  
  // 特殊处理"发现"按钮 - 跳转到分类页面
  if (navName === 'discover') {
    router.push({ name: 'category', params: { categoryId: 1 } })
    return
  }
  
  // 特殊处理"我的"按钮 - 直接跳转到登录页面
  if (navName === 'profile') {
    router.push({ name: 'login' })
    return
  }
  
  // 其他导航项
  router.push({ name: navName })
}
</script>

<template>
  <nav 
    v-if="route.meta?.showNav" 
    class="fixed bottom-0 left-0 right-0 w-full bg-white shadow-md border-t border-gray-200 z-50"
  >
    <div class="w-full max-w-md">
      <div class="flex justify-between py-2 px-2">
      <div 
        v-for="item in navItems" 
        :key="item.name" 
        class="flex flex-col items-center py-1 px-2 sm:px-4 rounded-full transition-colors duration-300 cursor-pointer flex-1"
        :class="[activeNav === item.name ? 'text-primary' : 'text-gray-500']"
        @click="handleNavClick(item.name)"
      >
        <FontAwesomeIcon 
          :icon="item.icon" 
          class="text-xl"
          :class="activeNav === item.name ? 'text-primary' : 'text-gray-400'"
        />
        <span class="text-xs mt-1">{{ item.label }}</span>
      </div>
    </div>
    </div>
  </nav>

</template>

<style scoped>
.text-primary {
  color: #ff6a00;
}

nav {
  max-width: 100%;
  margin: 0 auto;
  left: 0;
  right: 0;
}

@media (min-width: 640px) {
  nav {
    max-width: 28rem; /* 448px */
  }
}
</style>